<template>
  <div class="basic-example">
    <h2>基础流程图示例</h2>
    <p class="description">展示简单的串行流程</p>
    
    <FlowGraph :nodes="nodes" @node-click="handleNodeClick" />
    
    <div class="info-panel">
      <h3>说明</h3>
      <ul>
        <li>串行流程：节点按顺序执行</li>
        <li>点击节点查看详情</li>
        <li>自动计算布局和连接线</li>
      </ul>
      
      <div v-if="selectedNode" class="selected-info">
        <h4>选中节点信息</h4>
        <pre>{{ JSON.stringify(selectedNode, null, 2) }}</pre>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import FlowGraph from '../FlowGraph.vue';

const selectedNode = ref(null);

const nodes = [
  {
    id: '1',
    title: '原料准备',
    description: '准备加工原料',
    data: {
      duration: '1.0h',
      equipment: '备料设备',
    },
    nextNodeIds: '2',
  },
  {
    id: '2',
    title: '机械加工',
    description: '机械切削加工',
    data: {
      duration: '4.0h',
      equipment: '数控车床',
    },
    preNodeIds: '1',
    nextNodeIds: '3',
  },
  {
    id: '3',
    title: '质量检测',
    description: '质量检测和测量',
    data: {
      duration: '1.5h',
      equipment: '检测设备',
    },
    preNodeIds: '2',
    nextNodeIds: '4',
  },
  {
    id: '4',
    title: '包装入库',
    description: '产品包装和入库',
    data: {
      duration: '0.5h',
      equipment: '包装线',
    },
    preNodeIds: '3',
  },
];

const handleNodeClick = ({ node }) => {
  selectedNode.value = node;
  console.log('点击节点:', node);
};
</script>

<style scoped>
.basic-example {
  padding: 20px;
}

h2 {
  color: #333;
  margin-bottom: 8px;
}

.description {
  color: #666;
  margin-bottom: 20px;
}

.info-panel {
  margin-top: 20px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.info-panel h3 {
  margin-top: 0;
  color: #333;
}

.info-panel ul {
  color: #666;
  line-height: 1.8;
}

.selected-info {
  margin-top: 16px;
  padding: 12px;
  background: white;
  border-radius: 4px;
}

.selected-info h4 {
  margin-top: 0;
  color: #714b67;
}

.selected-info pre {
  background: #f5f5f5;
  padding: 12px;
  border-radius: 4px;
  overflow: auto;
  font-size: 12px;
}
</style>

